<section id="description">
    <!-- Description -->
    <div class="card">
        <div class="card-header">
          <h4 class="card-title">Description</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
              <div class="card-text">
                  <p>Content layout right sidebar provides more navigations options on page level. For the larger screen this layout provides best usability. This layout use the third column as a sidebar section.</p>
              </div>
          </div>
        </div> 
    </div>
    <!--/ Description -->
</section>

<section id="css">
    <!-- CSS Classes -->
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">CSS Classes</h4>
      </div>
      <div class="card-content">
        <div class="card-body">
            <div class="card-text">
              <p>This table contains all classes related to the content right sidebar layout. This is a custom layout classes for content right sidebar layout page requirements.</p>
              <p>All these options can be set via following classes:</p>
              <div class="table-responsive">
                <table class="table table-hover">
                  <thead>
                    <tr>
                      <th>Classes</th>
                      <th>Description</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <th scope="row"><code>.content-right-sidebar</code></th>
                      <td>You can create 3 column right layout by adding <code>.content-right-sidebar</code> class in <code>&lt;body&gt;</code> tag.</td>
                    </tr>
                    <tr>
                      <th scope="row"><code>.content-left</code></th>
                      <td>In this layout content should be float in right side, so <code>.content-left</code> class needs to add in content wrapper. Refer HTML markup line no 27.</td>
                    </tr>
                    <tr>
                      <th scope="row"><code>.sidebar-right</code></th>
                      <td>In this layout sidebar should be float in right side, so <code>.sidebar-right</code> class needs to add in sidebar wrapper. Refer HTML markup line no 33.</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
        </div>
      </div>
    </div>
    <!--/ CSS Classes -->
</section>

<section id="html">
    <!-- HTML Markup -->
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">HTML Markup</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
      </div>
      <div class="card-content">
        <div class="card-body">
          <div class="card-text">
            <p>This section contains HTML Markup to create 3 column right sidebar layout. You need to add the <code>.content-right-sidebar</code> class in the <code>&lt;body&gt;</code> tag as show in below markup on line no 4. This layout has a navigation, content and right sidebar sections with common header & footer.</p>
            <ul>
              <li><span class="text-bold-600">Line no 27:</span> Contain the and <code>.content-left</code> class for adjusting content section in right side.</li>
              <li><span class="text-bold-600">Line no 33:</span> Contain the <code>.sidebar-right</code> class for adjusting sidebar section in right side.</li>
            </ul>
            <p>Modern has a ready to use starter kit, you can use this layout directly by using the starter kit pages from the <code>modern-admin/starter-kit</code> folder.</p>
            
            <pre data-line="4, 27, 33" class="language-markup">
              <code class="language-markup">
                  &lt;!DOCTYPE html&gt;
                    &lt;html lang="en"&gt;
                      &lt;head&gt;&lt;/head&gt;
                      &lt;body data-menu="vertical-menu" class="vertical-layout vertical-menu content-right-sidebar menu-expanded"&gt;
                        
                        &lt;!-- navbar-fixed-top--&gt;
                        &lt;nav role="navigation" class="header-navbar navbar navbar-with-menu navbar-fixed-top navbar-dark navbar-shadow navbar-border"&gt;
                            ...
                        &lt;/nav&gt;
                        
                        &lt;!-- BEGIN Navigation--&gt;
                        &lt;div class="main-menu menu-dark menu-fixed menu-shadow"&gt;
                            ...
                        &lt;/div&gt;
                        &lt;!-- END Navigation--&gt;

                        &lt;!-- BEGIN Content--&gt;
                        &lt;div class="content app-content container-fluid"&gt;
                            &lt;div class="content-wrapper"&gt;
                                &lt;!-- content header--&gt;
                                &lt;div class="content-header row"&gt;
                                    ...
                                &lt;/div&gt;
                                &lt;!-- content header--&gt;
                                
                                &lt;!-- content right--&gt;
                                &lt;div class="content-left"&gt;
                                    ...
                                &lt;/div&gt;
                                &lt;!-- content right--&gt;
                                
                                &lt;!-- sidebar right--&gt;
                                &lt;div class="sidebar-right"&gt;
                                    &lt;div class="sidebar"&gt;
                                        ...
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;!-- sidebar right--&gt;
                                
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!-- END Content--&gt;


                        &lt;!-- START FOOTER DARK--&gt;
                        &lt;footer class="footer footer-dark"&gt;
                            ...
                        &lt;/footer&gt;
                        &lt;!-- START FOOTER DARK--&gt;

                      &lt;/body&gt;
                    &lt;/html&gt;
              </code>
            </pre>
          </div>
        </div>
      </div>
    </div>
    <!--/ HTML Markup -->
</section>

<section id="pug">
    <!-- PUG Code -->
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">PUG Configuration</h4>
        <a class="heading-elements-toggle"><i class="la la-ellipsis-h font-medium-3"></i></a>
        <div class="heading-elements">
            <ul class="list-inline mb-0">
                <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                <li><a data-action="reload"><i class="ft-rotate-cw"></i></a></li>
                <li><a data-action="close"><i class="ft-x"></i></a></li>
            </ul>
        </div>
      </div>
        <div class="card-content">
          <div class="card-body">
              <div class="card-text">
                  <p>Modern Admin use PUG as template engine  to generate pages and whole template quickly using node js, for getting start with PUG usage & template generating process please refer template documentation.</p>
                  <h5 class="card-title mt-2">PUG Variables</h5>
                  <p>This table contains required PUG variables to generate 3 column right sidebar layout.</p>
                  <div class="table-responsive">
                    <table class="table table-hover">
                      <thead>
                        <tr>
                            <th>Block</th>
                            <th>Variable</th>
                            <th>Datatype</th>
                            <th>Value</th>
                            <th>Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th scope="row"><code>pageConfig</code></th>
                          <td><code>contentLayout</code></td>
                          <td><code>string</code></td>
                          <td><code>'content-right-sidebar'</code></td>
                          <td><code>pageConfig</code> block has a page configuration variables, in that for 3 column layout need to define variable <code>- var contentLayout = 'content-right-sidebar'</code></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div class="alert bg-info alert-icon-left alert-dismissible fade in mb-2" role="alert">
                    <span class="alert-icon"><i class="la la-info"></i></span>
                    Modern Admin Template <a href="https://pixinvent.com/modern-admin-clean-bootstrap-4-dashboard-html-template/documentation" target="_blank" class="white"><u>documentation</u></a> has full list of all blocks, datatype, variables and their description table. Please review it for more configuration options.
                  </div>
                  <h5 class="card-title mt-2">PUG Code</h5>
                  <p>To generate content right sidebar layout page or template, you need to use following PUG code.</p>
                  <ul>
                    <li><span class="text-bold-600">Line no 20-21:</span> You need to set <code>contentLayout</code> variable value as <code>'content-right-sidebar'</code> in <code>pageConfig</code> block.</li>
                    <li><span class="text-bold-600">Line no 27-28:</span> <code>content</code> block has content section html file included <code>include ../contents/layout-content-right-sidebar.html</code>, which can be customizable on page level.</li>
                    <li><span class="text-bold-600">Line no 30-31:</span> <code>sidebar</code> block has sidebar section html file included <code>include ../contents/sidebar-common.html</code>, which can be customizable on page level.</li>
                  </ul>
                  <p>If you want to use this layout on page level you need to define it on page it self. This template has one example pug file for content right sidebar <code>layout-content-right-sidebar.pug</code>, however you can use it on template level but it will generate whole template as a content right sidebar.</p>
                  <pre data-line="20-21, 27-28, 30-31" data-line-offset="11" class="language-pug">
                  <code class="language-pug">
                      block pageVars
                      	- var pageTitle    = "Content right Sidebar"
                      	- var activeMenu   = "layout-content-right-sidebar"
                      	- var pageSubTitle = "content layout with right sidebar"
                      	- var description  = "The content layout page structure with navigation, content area and right sidebar."
                      
                      extends template
                      
                      append pageConfig
                      	- var contentLayout = 'content-right-sidebar'
                      
                      append breadcrumbs
                      	+breadcrumbs([{url:"index.html",name:"Home"},{url:"#",name:"Page Layouts"}, {name:"Content Right Sidebar"}])
                      
                      //- Include page content in content black
                      append content
                      	include ../contents/layout-content-right-sidebar.html
                      
                      append sidebar
                      	include ../contents/sidebar-common.html
                      
                      //- Vendor CSS
                      //------------------------------
                      //- Add Vendor specific CSS
                      append vendorcss
                      
                      //- Page CSS
                      //------------------------------
                      
                      //- Add custom page specific CSS
                      append pagecss
                      
                      //- Vendor JS
                      //------------------------------
                      //- Add vendor specific JS
                      append vendorjs
                      
                      //- Page JS
                      //------------------------------
                      //- Add custom page specific JS
                      append pagejs
                  </code>
                  </pre>
              </div>
          </div>
      </div>
    </div>
    <!--/ PUG Code -->
</section>